import React from "react";
import classNames from "classnames";

export enum ButtonSize {
  large = "lg",
  small = "sm",
}

export type ButtonType  = "primary" | "default" | "danger" | "link"

interface BaseButtonProps {
  className?: string
  disabled?: boolean;
  size?: ButtonSize;
  btnType?: ButtonType;
  children: React.ReactNode;
  href?: string;
}

type NativeButtonProps = BaseButtonProps & React.ButtonHTMLAttributes<HTMLElement>;
type AnchorButtonProps = BaseButtonProps & React.AnchorHTMLAttributes<HTMLElement>;
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;

const Button: React.FC<ButtonProps> = (props) => {
  const { disabled, size, btnType, children, href, className, ...restProps } = props;
  const classes = classNames("btn", className, {
    // 后面其实跟的是布尔值
    [`btn-${btnType}`]: !!btnType,
    [`btn-${size}`]: !!size,
    disabled: btnType === "link" && disabled,
  });
  if (btnType === "link" && href) {
    return (
      <a href={href} className={classes} {...restProps}>{children}</a>
    );
  } else {
    return ( 
      <button className={classes} disabled={disabled} {...restProps}>{children}</button>
    );
  }
};

Button.defaultProps = {
  disabled: false,
  btnType: "default",
};

export default Button;
